import React, { useState } from 'react';
import { motion } from 'framer-motion';
import { useForm } from 'react-hook-form';
import { Send, Mail, Phone, MapPin, Clock, Users, Award, Globe } from 'lucide-react';

const Contact = () => {
  const [isSubmitting, setIsSubmitting] = useState(false);
  
  const { register, handleSubmit, formState: { errors }, reset } = useForm();

  const onSubmit = async (data) => {
    setIsSubmitting(true);
    
    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 2000));
    
    console.log('表单数据:', data);
    alert('感谢您的留言！我们会尽快与您联系。');
    reset();
    setIsSubmitting(false);
  };

  const contactInfo = [
    {
      icon: Mail,
      title: '邮箱地址',
      content: 'contact@convertly.com',
      description: '我们通常在24小时内回复'
    },
    {
      icon: Phone,
      title: '联系电话',
      content: '+1 (555) 123-4567',
      description: '周一至周五，上午9点至下午6点（太平洋时间）'
    },
    {
      icon: MapPin,
      title: '办公地址',
      content: '加利福尼亚州旧金山市',
      description: '欢迎预约参观我们的办公室'
    },
    {
      icon: Clock,
      title: '工作时间',
      content: '周一至周五: 9AM - 6PM',
      description: '太平洋时间，周末休息'
    }
  ];

  const stats = [
    { icon: Users, value: '10,000+', label: '满意客户' },
    { icon: Award, value: '99.9%', label: '客户满意度' },
    { icon: Globe, value: '50+', label: '服务国家' }
  ];

  return (
    <section id="contact" className="py-24 bg-gradient-to-br from-blue-50 via-white to-cyan-50">
      <div className="max-w-screen-2xl mx-auto px-4 sm:px-6 lg:px-8">
        <motion.div
          className="text-center mb-20"
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.8 }}
        >
          <h2 className="text-4xl md:text-5xl font-bold text-zinc-900 mb-6">
            与我们
            <span className="text-[#345aff]"> 取得联系</span>
          </h2>
          <p className="text-xl text-zinc-600 max-w-3xl mx-auto">
            准备好提升您的业务了吗？立即联系我们的专家团队，了解Convertly如何帮助您实现目标。
          </p>
        </motion.div>

        <div className="grid grid-cols-1 lg:grid-cols-2 gap-16">
          {/* 联系表单 */}
          <motion.div
            className="bg-white p-8 md:p-12"
            initial={{ opacity: 0, x: -50 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.8 }}
          >
            <h3 className="text-2xl font-bold text-zinc-900 mb-8">发送消息</h3>
            
            <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div className="relative">
                  <motion.input
                    type="text"
                    placeholder="您的姓名"
                    className={`w-full px-4 py-4 border-2 focus:outline-none focus:ring-0 transition-all duration-200 ${
                      errors.name 
                        ? 'border-red-300 focus:border-red-500' 
                        : 'border-slate-200 focus:border-blue-500'
                    }`}
                    {...register('name', { required: '请输入您的姓名' })}
                    whileFocus={{ scale: 1.02 }}
                  />
                  {errors.name && (
                    <motion.p
                      className="text-red-500 text-sm mt-2"
                      initial={{ opacity: 0, y: -10 }}
                      animate={{ opacity: 1, y: 0 }}
                    >
                      {errors.name.message}
                    </motion.p>
                  )}
                </div>

                <div className="relative">
                  <motion.input
                    type="email"
                    placeholder="您的邮箱"
                    className={`w-full px-4 py-4 border-2 focus:outline-none focus:ring-0 transition-all duration-200 ${
                      errors.email 
                        ? 'border-red-300 focus:border-red-500' 
                        : 'border-slate-200 focus:border-blue-500'
                    }`}
                    {...register('email', { 
                      required: '请输入您的邮箱',
                      pattern: {
                        value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
                        message: '请输入有效的邮箱地址'
                      }
                    })}
                    whileFocus={{ scale: 1.02 }}
                  />
                  {errors.email && (
                    <motion.p
                      className="text-red-500 text-sm mt-2"
                      initial={{ opacity: 0, y: -10 }}
                      animate={{ opacity: 1, y: 0 }}
                    >
                      {errors.email.message}
                    </motion.p>
                  )}
                </div>
              </div>

              <div className="relative">
                <motion.input
                  type="text"
                  placeholder="公司名称"
                  className={`w-full px-4 py-4 border-2 focus:outline-none focus:ring-0 transition-all duration-200 ${
                    errors.company 
                      ? 'border-red-300 focus:border-red-500' 
                      : 'border-slate-200 focus:border-blue-500'
                  }`}
                  {...register('company')}
                  whileFocus={{ scale: 1.02 }}
                />
                {errors.company && (
                  <motion.p
                    className="text-red-500 text-sm mt-2"
                    initial={{ opacity: 0, y: -10 }}
                    animate={{ opacity: 1, y: 0 }}
                  >
                    {errors.company.message}
                  </motion.p>
                )}
              </div>

              <div className="relative">
                <motion.textarea
                  rows={6}
                  placeholder="告诉我们关于您的项目..."
                  className={`w-full px-4 py-4 border-2 focus:outline-none focus:ring-0 transition-all duration-200 resize-none ${
                    errors.message 
                      ? 'border-red-300 focus:border-red-500' 
                      : 'border-slate-200 focus:border-blue-500'
                  }`}
                  {...register('message', { required: '请输入您的留言' })}
                  whileFocus={{ scale: 1.02 }}
                />
                {errors.message && (
                  <motion.p
                    className="text-red-500 text-sm mt-2"
                    initial={{ opacity: 0, y: -10 }}
                    animate={{ opacity: 1, y: 0 }}
                  >
                    {errors.message.message}
                  </motion.p>
                )}
              </div>

              <motion.button
                type="submit"
                disabled={isSubmitting}
                className="w-full bg-[#345aff] text-white py-4 font-semibold text-lg transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center"
                whileHover={{ scale: isSubmitting ? 1 : 1.02, y: isSubmitting ? 0 : -2 }}
                whileTap={{ scale: isSubmitting ? 1 : 0.98 }}
              >
                {isSubmitting ? (
                  <div className="flex items-center">
                    <div className="w-5 h-5 border-2 border-white border-t-transparent animate-spin mr-2"></div>
                    发送中...
                  </div>
                ) : (
                  <div className="flex items-center">
                    <Send className="w-5 h-5 mr-2" />
                    发送消息
                  </div>
                )}
              </motion.button>
            </form>
          </motion.div>

          {/* 联系信息 */}
          <motion.div
            className="space-y-8"
            initial={{ opacity: 0, x: 50 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.8 }}
          >
            <div>
              <h3 className="text-2xl font-bold text-zinc-900 mb-8">联系我们</h3>
              
              <div className="space-y-6">
                {contactInfo.map((info, index) => (
                  <motion.div
                    key={info.title}
                    className="flex items-start p-6 bg-white transition-all duration-300"
                    initial={{ opacity: 0, y: 20 }}
                    whileInView={{ opacity: 1, y: 0 }}
                    viewport={{ once: true }}
                    transition={{ duration: 0.5, delay: index * 0.1 }}
                    whileHover={{ y: -4 }}
                  >
                    <div className="w-12 h-12 bg-gradient-to-br from-blue-500 to-cyan-500 flex items-center justify-center mr-4 flex-shrink-0">
                      <info.icon className="w-6 h-6 text-white" />
                    </div>
                    <div>
                      <h4 className="font-semibold text-zinc-900 mb-1">{info.title}</h4>
                      <p className="text-blue-700 font-medium mb-1">{info.content}</p>
                      <p className="text-zinc-600 text-sm">{info.description}</p>
                    </div>
                  </motion.div>
                ))}
              </div>
            </div>

            {/* 统计数据 */}
            <motion.div
              className="bg-gradient-to-br from-blue-700 to-cyan-500 p-8 text-white"
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.8, delay: 0.4 }}
            >
              <h4 className="text-xl font-bold mb-6">为什么选择我们？</h4>
              <div className="grid grid-cols-3 gap-4">
                {stats.map((stat, index) => (
                  <motion.div
                    key={stat.label}
                    className="text-center"
                    initial={{ opacity: 0, scale: 0.8 }}
                    whileInView={{ opacity: 1, scale: 1 }}
                    viewport={{ once: true }}
                    transition={{ duration: 0.5, delay: 0.6 + index * 0.1 }}
                  >
                    <stat.icon className="w-8 h-8 mx-auto mb-2 opacity-80" />
                    <div className="text-2xl font-bold">{stat.value}</div>
                    <div className="text-sm opacity-80">{stat.label}</div>
                  </motion.div>
                ))}
              </div>
            </motion.div>

            {/* 地图占位符 */}
            <motion.div
              className="bg-slate-200 h-64 flex items-center justify-center"
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.8, delay: 0.6 }}
            >
              <div className="text-center text-zinc-600">
                <MapPin className="w-12 h-12 mx-auto mb-2" />
                <p className="font-medium">交互式地图</p>
                <p className="text-sm">加利福尼亚州旧金山市</p>
              </div>
            </motion.div>
          </motion.div>
        </div>
      </div>
    </section>
  );
};

export default Contact;